<template>
  <div class="wait-audit-container">
    <h4>您注册为{{ registerType === 'company' ? '企业' : '医药机构' }}用户，请完善资料，并等待管理员审核</h4>
<!--    <p>{{ loginUserInfo }}</p>-->
    <div class="form-container">
      <el-skeleton :rows="16" :loading="loading" animated style="width: 100%;">
        <template v-if="registerType === 'company'">
          <avue-form :option="companyOption" v-model="formData" @submit="submitCompany"></avue-form>
        </template>
        <template v-if="registerType === 'institution'">
          <avue-form :option="institutionOption" v-model="formData" @submit="submitInstitution"></avue-form>
        </template>
      </el-skeleton>
      <el-button v-if="formData && formData.status === 2" style="margin: 16px 0; width: 200px;" icon="el-icon-refresh" @click="refreshData">刷新</el-button>
      <el-alert v-if="formData && formData.status === 1"
                title="资料审批通过"
        type="success"
        description="您提交的资料已审批通过，请退出后重新登录系统，即可正常使用系统"
                :closable="false"
        show-icon>
      </el-alert>
    </div>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import * as companyApi from "@/api/business/company"
import * as instApi from "@/api/business/institution"

export default {
  name: 'wait-audit',
  data () {
    return {
      loading: false,
      submitting: false,
      formData: {}
    }
  },
  computed: {
    ...mapGetters(['loginUserInfo']),
    registerType () {
      if (this.loginUserInfo.roleName==='待审核医药机构用户') {
        return 'institution'
      } else if (this.loginUserInfo.roleName==='待审核企业用户') {
        return 'company'
      } else {
        return 'other'
      }
    },
    institutionOption () {
      return {
        labelWidth: 200,
        emptyBtn: false,
        detail: this.formData && this.formData.id && this.formData.status !== 3,
        column: [
          {
            label: "ID",
            prop: "id",
            span: 24,
            display: false,
          },
          {
            label: "注册类型",
            prop: "registerType",
            type: "radio",
            value: '1',
            span: 24,
            dicData: [
              { value: '1', label: '医院' },
              { value: '2', label: '药店' },
            ],
            rules: [{
              required: true,
              message: "请选择注册类型",
              trigger: "blur"
            }],
          },
          {
            label: `${(this.formData && this.formData.registerType === '1') ? '医院':'药店'}名称`,
            prop: "instName",
            type: "input",
            span: 24,
            rules: [{
              required: true,
              message: "请输入医院名称",
              trigger: "blur"
            }],
          },
          {
            label: "地市",
            prop: "city",
            type: "input",
            value: "荆州市",
            display: false
          },
          {
            label: "统筹区",
            prop: "district",
            type: "select",
            dicUrl: "/api/blade-system/dict/dictionary?code=medpur_institution",
            dataType: "string",
            span: 24,
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            rules: [{
              required: true,
              message: "请输入区县",
              trigger: "blur"
            }],
          },
          {
            label: "医院性质",
            prop: "ownership",
            type: "radio",
            span: 24,
            display: (this.formData && this.formData.registerType === '1'),
            dicData: [
              { value: '公立', label: '公立' },
              { value: '民营', label: '民营' },
            ],
            rules: [{
              required: true,
              message: "请选择医院性质",
              trigger: "blur"
            }],
          },
          {
            label: "登记号",
            prop: "registerNo",
            type: "input",
            span: 24,
            display: (this.formData && this.formData.registerType === '1'),
            rules: [{
              required: true,
              message: "请输入区县",
              trigger: "blur"
            }],
          },
          {
            label: "法定代表人姓名",
            prop: "representative",
            type: "input",
            span: 24,
            rules: [{
              required: true,
              message: "请输入区县",
              trigger: "blur"
            }],
          },
          {
            label: "法定代表人身份证（上传）",
            prop: "representIdPic",
            type: "upload",
            span: 24,
            accept: '.png,.jpeg,.jpg',
            display: (this.formData && this.formData.registerType === '2'),
            listType: 'picture-img',
            propsHttp: {
              res: 'data',
              url: 'name',
            },
            canvasOption: {
              text: ' ',
              ratio: 0.1
            },
            action: '/api/blade-resource/oss/endpoint/put-file',
            rules: [{
              required: true,
              message: "请上传法定代表人身份证",
              trigger: "blur"
            }],
          },
          {
            label: "营业执照号",
            prop: "licenseNo",
            span: 24,
            display: (this.formData && this.formData.registerType === '2'),
            rules: [{
              required: true,
              message: "请填写营业执照号",
              trigger: "blur"
            }],
          },
          {
            label: "营业执照图片（上传）",
            prop: "licensePic",
            type: "upload",
            span: 24,
            display: (this.formData && this.formData.registerType === '2'),
            listType: 'picture-img',
            propsHttp: {
              res: 'data',
              url: 'name',
            },
            canvasOption: {
              text: ' ',
              ratio: 0.1
            },
            accept: '.png,.jpeg,.jpg',
            action: '/api/blade-resource/oss/endpoint/put-file',
            rules: [{
              required: true,
              message: "请上传营业执照图片",
              trigger: "blur"
            }],
          },
          {
            label: "联系电话",
            prop: "phone",
            type: "input",
            span: 24,
            rules: [{
              required: true,
              message: "请填写联系电话",
              trigger: "blur"
            }],
          },
          {
            label: "地址",
            prop: "address",
            type: "input",
            span: 24,
            rules: [{
              required: true,
              message: "请填写联系电话",
              trigger: "blur"
            }],
          },
          {
            label: "经营性质",
            prop: "busiScope",
            type: "input",
          },
          {
            label: "医疗机构类别",
            prop: "category",
            type: "input",
            display: (this.formData && this.formData.registerType === '1'),
          },
          {
            label: "医院等级",
            prop: "grade",
            type: "input",
            display: (this.formData && this.formData.registerType === '1'),
          },
          {
            label: "隶属关系",
            prop: "affiliation",
            type: "input",
            display: (this.formData && this.formData.registerType === '1'),
          },
          {
            label: "开户银行",
            prop: "bankName",
            type: "input",
            span: 24,
            display: (this.formData && this.formData.registerType === '1'),
            rules: [{
              required: true,
              message: '请输入开户银行名称',
              trigger: 'blur'
            }],
          },
          {
            label: "银行开户名",
            prop: "bankAccountName",
            type: "input",
            span: 24,
            display: (this.formData && this.formData.registerType === '1'),
            rules: [{
              required: true,
              message: '请输入银行开户名',
              trigger: 'blur'
            }],
          },
          {
            label: "银行账号",
            prop: "bankAccount",
            type: "input",
            span: 24,
            display: (this.formData && this.formData.registerType === '1'),
            rules: [{
              required: true,
              message: '请输入银行账号',
              trigger: 'blur'
            }],
          },
          {
            label: "分管医保院领导",
            prop: "insuranceLeader",
            type: "input",
            viewDisplay: false,
            display: (this.formData && this.formData.registerType === '1'),

          },
          {
            label: "分管医保院领导电话",
            prop: "insuranceLeaderPhone",
            type: "input",
            viewDisplay: false,
            display: (this.formData && this.formData.registerType === '1'),
          },
          {
            label: "医保办负责人",
            prop: "insuranceDuty",
            type: "input",
            display: (this.formData && this.formData.registerType === '1'),
          },
          {
            label: "医保办负责人电话",
            prop: "insuranceDutyPhone",
            type: "input",
            display: (this.formData && this.formData.registerType === '1'),
          },
          {
            label: "医保办电话",
            prop: "officePhone",
            type: "input",
            span: 24,
            display: (this.formData && this.formData.registerType === '1'),
          },
          {
            label: "审批状态",
            prop: "status",
            span: 24,
            type: "select",
            disabled: true,
            display: !!(this.formData && this.formData.id),
            dicData: [
              { value: 1, label: '正常' },
              { value: 2, label: '待审批' },
              { value: 3, label: '驳回' },
            ]
          },
        ]
      }
    },
    companyOption () {
      return  {
        labelWidth: 200,
        emptyBtn: false,
        detail: this.formData && this.formData.id && this.formData.status !== 3,
        column: [
          {
            label: "ID",
            prop: "id",
            span: 24,
            display: false,
          },
          {
            label: '审批地市',
            prop: 'city',
            value: '荆州市',
            display: false,
          },
          {
            label: "统筹区",
            prop: "district",
            type: "select",
            dicUrl: "/api/blade-system/dict/dictionary?code=medpur_institution",
            dataType: "string",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            search: true,
            rules: [{
              required: true,
              message: "请输入区县",
              trigger: "blur"
            }],
          },
          {
            label: "企业名称",
            prop: "companyName",
            type: "input",
            span: 24,
            rules: [{
              required: true,
              message: "请输入企业名称",
              trigger: "blur"
            }],
          },
          {
            label: "企业编号",
            prop: "companyNo",
            display: !!(this.formData && this.formData.id),
            span: 24,
            disable: true
          },
          {
            label: "企业类型",
            prop: "type",
            type: "radio",
            span: 24,
            dicUrl: "/api/blade-system/dict/dictionary?code=medpur_company",
            dataType: "string",
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            search: true,
            rules: [{
              required: true,
              message: "请输入企业类型",
              trigger: "blur"
            }],
            value: "配送企业" // 这里设置默认选中值为 "1"
          },

          /*
          法定代表人	representative
          法定代表人身份证（上传）	represent_id_pic
          营业执照	license_no
          营业执照图片上传	license_pic
          地址	address
          联系电话	phone
           */
          {
            label: "法定代表人姓名",
            prop: "representative",
            span: 24,
            rules: [{
              required: true,
              message: "请输入法定代表人姓名",
              trigger: "blur"
            }],
          },
          {
            label: "法定代表人身份证（上传）",
            prop: "representIdPic",
            type: "upload",
            span: 24,
            listType: 'picture-img',
            propsHttp: {
              res: 'data',
              url: 'name',
            },
            canvasOption: {
              text: ' ',
              ratio: 0.1
            },
            action: '/api/blade-resource/oss/endpoint/put-file',
            rules: [{
              required: true,
              message: "请上传法定代表人身份证",
              trigger: "blur"
            }],
          },
          {
            label: "营业执照号",
            prop: "licenseNo",
            span: 24,
            rules: [{
              required: true,
              message: "请填写营业执照号",
              trigger: "blur"
            }],
          },
          {
            label: "营业执照图片（上传）",
            prop: "licensePic",
            type: "upload",
            span: 24,
            listType: 'picture-img',
            propsHttp: {
              res: 'data',
              url: 'name',
            },
            canvasOption: {
              text: ' ',
              ratio: 0.1
            },
            action: '/api/blade-resource/oss/endpoint/put-file',
            rules: [{
              required: true,
              message: "请上传营业执照图片",
              trigger: "blur"
            }],
          },
          {
            label: "地址",
            prop: "address",
            span: 24,
            rules: [{
              required: true,
              message: "请填写地址",
              trigger: "blur"
            }],
          },
          {
            label: "联系电话",
            prop: "phone",
            span: 24,
            rules: [{
              required: true,
              message: "请填写联系电话",
              trigger: "blur"
            }],
            row: true,
          },
          {
            label: '开户行名称',
            prop: 'bankBranchName',
            rules: [{
              required: true,
              message: "请输入开户行名称",
              trigger: "blur"
            }],
          },
          {
            label: '银行账户',
            prop: 'bankAccountNo',
            rules: [{
              required: true,
              message: "请输入银行账户",
              trigger: "blur"
            }],
          },
          {
            label: '账户名称',
            prop: 'bankAccountName',
            rules: [{
              required: true,
              message: "请输入账户名称",
              trigger: "blur"
            }],
            row: true,
          },
          {
            label: "审批状态",
            prop: "status",
            span: 24,
            type: "select",
            disabled: true,
            display: !!(this.formData && this.formData.id),
            dicData: [
              { value: 1, label: '正常' },
              { value: 2, label: '待审批' },
              { value: 3, label: '驳回' },
            ]
          }
        ]
      }
    }
  },
  methods: {
    async submitInstitution (form, done) {
      try {
        const submitForm = { ...form }
        const { data } = await instApi.submitInstiForRegister(submitForm)
        if (data.success) {
          this.loadInstitutionInfo()
        }
      } finally {
        done()
      }
    },
    async submitCompany (form, done) {
      try {
        const submitForm = { ...form }
        const { data } = await companyApi.submitCompanyForRegister(submitForm)
        if (data.success) {
          this.loadCompanyInfo()
        }
      } finally {
        done()
      }
    },
    async loadCompanyInfo () {
      this.loading = true
      try {
        const { data } = await companyApi.getList(1, 1, { createUser: this.loginUserInfo.id, isDeleted: 0 })
        if (data.success && data.data.records.length) {
          this.formData = { ...data.data.records[0] }
          if (data.data.records[0].status === 2) {
            this.companyOption.detail = true
          }
        }
      } finally {
        this.loading = false
      }
    },
    async loadInstitutionInfo () {
      this.loading = true
      try {
        const { data } = await instApi.getList(1, 1, { createUser: this.loginUserInfo.id, isDeleted: 0 })
        if (data.success && data.data.records.length) {
          this.formData = { ...data.data.records[0] }
          if (data.data.records[0].status === 2) {
            this.institutionOption.detail = true
          }
        }
      } finally {
        this.loading = false
      }
    },
    refreshData () {
      if (this.registerType === 'company') {
        this.loadCompanyInfo()
      } else if (this.registerType === 'institution') {
        this.loadInstitutionInfo()
      }
    },
  },
  mounted () {
    this.refreshData()
  },
}
</script>

<style lang="scss" scoped>
.wait-audit-container {
  margin-bottom: 100px;
  padding-bottom: 120px;
  padding: 32px;
  .form-container {
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #EBEEF5;
  }
}
</style>
